<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>专区霸主</title>
		<meta http-equiv="pragma" content="no-cache"> 
	    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
	    <meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/common.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		body {
			background-color: #F3F3F3;
		}
		.mui-content {
			width: 100%;
			background-color: #F3F3F3;
		    -webkit-overflow-scrolling: touch;
		}
		.mui-table-view.mui-grid-view {
			padding: 0px;
		}
		.headerDiv {
			position: relative;
			width: 100%;
			height: 200px;
			background-size: 100% 100%;
		}
		.title-div {
			width: 105px;
		    height: 28px;
		    background-color: #FFFFFF;
		    border-radius: 14px;
		    border-color: #DCDCDC;
		    position: absolute;
		    top: 10px;
		    left: 13px;
		    text-align: center;
		}
		.title-icon {
			width: 9px;
			height: 6px;
		}
		.goods-title {
			font-size: 15px;
		    color: #4C4C4C;
		    font-family: "PingFang-SC-Regular";
		    line-height: 28px;
		    margin-left: 3px;
		}
		.shadow-div {
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 100%;
			height: 80px;
			background-color: rgba(0, 0, 0, 0.5);
			display: table;
		}
		.shadow-container {
			padding-left: 14px;
    			display: table-cell;
		}
		.goods-name {
	        display: table-row;
		    vertical-align: middle;
		    font-size: 17px;
		    color: #FFFFFF;
		    font-family: "PingFang-SC-Regular";
		    line-height: 25px;
		}
		.goods-des {
	        width: 98%;
	        height: 32px;
		    line-height: 16px;
		    font-size: 10px;
		    font-family: "PingFang-SC-Regular";
		    color: #FFFFFF;
		    word-break:break-all;
			display:-webkit-box;
			-webkit-line-clamp:2;
			-webkit-box-orient:vertical;
			overflow:hidden;
		}
		.goods-price {
		    position: relative;
    			line-height: 19px;
		}
		.symbol-span {
			font-size: 10px;
			font-family: "PingFang-SC-Regular";
			color: #E58014;
		}
		.price-span {
			font-size: 15px;
			font-family: "PingFang-SC-Regular";
			color: #E58014;
		}
		.right-div {
			position: absolute;
			right: 14px;
			height: 19px;
			bottom: 0px;
		}
		.like-icon {
			width: 13px;
			height: 14px;
		}
		.like-num {
			margin-left: 5px;
			color: #C8BEBE;
			font-size: 14px;
			font-family: "PingFang-SC-Regular";
		}
		.empty_list {
			display: none;
		}
	</style>
	<body>
		<div class="mui-content">
			<!--<div class="headerDiv">
				<div class="title-div">
					<img class="like-icon" src="../img/index/chihuo_icon.png" />
					<span class="goods-title">专区霸主</span>
				</div>
				<div class="shadow-div">
					<div class="shadow-container">
						<div class="goods-name">健康套餐</div>
						<div class="goods-des">营养补充型、抗氧化型减肥型、辅助治疗型等。 补充一种或多种人体所必需的营养素。</div>
						<div class="goods-price">
							<span class="symbol-span">¥ </span><span class="price-span">100</span>
							<div class="right-div">
								<img class="like-icon" src="../img/index/chihuo_icon.png" />
								<span class="like-num">666</span>
							</div>
						</div>
					</div>
				</div>
			</div>-->
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<ul id="specialul" class="mui-table-view mui-grid-view">
			        <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
		                <div class="mui-media-object">
		                		<img class="special-image" src="../img/index/tuijian_bg.png" />
		                		<div class="special-info-div">
		                			<div class="special-text">夹心蒸蛋糕</div>
		                			<div class="special-collect-div">
		                				<img class="collect-icon" src="../img/index/chihuo_icon.png" />
		                				<span class="collect-span">333人</span>
		                			</div>
		                		</div>
		                		<div class="special-info-div">
		                			<div class="special-price">25.80¥</div>
		                			<div class="add-shopping-car-div"></div>
		                		</div>
		                	</div>
			        </li>
			        <li class="mui-table-view-cell mui-media mui-col-xs-6">
		                <div class="mui-media-object">
		                		<img class="special-image" src="../img/index/tuijian_bg.png" />
		                		<div class="special-info-div">
		                			<div class="special-text">夹心蒸蛋糕</div>
		                			<div class="special-collect-div">
		                				<img class="collect-icon" src="../img/index/chihuo_icon.png" />
		                				<span class="collect-span">333人</span>
		                			</div>
		                		</div>
		                		<div class="special-info-div">
		                			<div class="special-price">25.80¥</div>
		                			<div class="add-shopping-car-div"></div>
		                		</div>
		                	</div>
			        </li>-->
			    </ul>
		    </div>
		    <div class="empty_list">暂无商品！</div>
		</div>
		<div class="common-back-div">
			<img class="common-back-img" src="../img/common/public_back.png" />
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js"></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript">
		var userID = base.getParameter("userID");
		var goodsTypeID = base.getParameter("goodsTypeID");
		var goodsTypeName = base.getParameter("goodsTypeName");
		$(function() {
			document.title = goodsTypeName;
		})
		var FIRST_PAGE_NO = 1;
		var saved = base.getSavedData();
		var query = saved.query || {
			pageNo: FIRST_PAGE_NO,
			dir: 'none'
		};
		goodsListByType(query.pageNo);//获取搜索记录数据
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					callback: pulldownRefresh
				},
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			}
		});
		function pulldownRefresh() {
			query.pageNo = FIRST_PAGE_NO;
			query.dir = 'down';
			goodsListByType(query.pageNo);
		}

		function pullupRefresh() {
			query.pageNo++;
			query.dir = 'up';
			goodsListByType(query.pageNo);
		}

		function goodsListByType(page) {
			base.setWait('正在获取数据...');
			query.pageNo = page;
			var url = base.url.goodsListByType;
			var data = {
				userID: userID,
				goodsTypeID:goodsTypeID,
				pageNo: page,
			};
			base.postData(url,data,goodsListByTypeSuccess);
		}

		function goodsListByTypeSuccess(data) {
			base.clearWait();
			if(data.success === true && data.context) {
				var list = data.context.goodsList||[];
				if(!list || !list.length) {
					if(query.pageNo == FIRST_PAGE_NO) {
						$('#pullrefresh').hide();
						$('.empty_list').show();
					}
					if (query.dir === 'down') {
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					} else if (query.dir === 'up') {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
					}
				} else {
					$('.empty_list').hide();
					$('#pullrefresh').show();
					if(query.dir === 'up') {
						showList(list, saved.list.length);
						saved.list = saved.list.concat(list);
					} else {
						showList(list);
						saved.list = list;
					}
				}
				if(query.dir === 'down') {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui('#pullrefresh').pullRefresh().refresh(true);
				} else if(query.dir === 'up') {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh();
				}
			} else {
				if(query.pageNo == FIRST_PAGE_NO) {
					$('#pullrefresh').hide();
					$('.empty_list').show();
				}
				if (query.dir === 'down') {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
				} else if (query.dir === 'up') {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
				}
			}
			query.dir = 'none';
		}
		function showList(list) {
			var html = '';
			for (var i in list) {
				html += getGoodsListItem(list[i], i);
			}
			$("#specialul").html(html);
		}
		function getGoodsListItem(item, index) {
			var html = '';
			if (index == 0 && query.pageNo == 1) {
				html += '<div class="headerDiv" style="background-image: url('+item.goodsImg+');" data-index="' + index + '">'
				html += '	<div class="title-div">'
				html += '		<img class="title-icon" src="../img/common/title_img.png" />'
				html += '		<span class="goods-title">专区霸主</span>'
				html += '	</div>'
				html += '	<div class="shadow-div">'
				html += '		<div class="shadow-container">'
				html += '			<div class="goods-name">'+item.goodsName+'</div>'
				html += '			<div class="goods-des">'+(item.describe||'&#12288')+'</div>'
				html += '			<div class="goods-price">'
				html += '				<span class="symbol-span">¥ </span><span class="price-span">'+(item.price/100)+'</span>'
				html += '				<div class="right-div">'
				html += '					<img class="like-icon" src="../img/common/hot_icon.png" />'
				html += '					<span class="like-num">'+item.popularity+'</span>'
				html += '				</div>'
				html += '			</div>'
				html += '		</div>'
				html += '	</div>'
				html += '</div>'
			} else {
				html += '<li class="mui-table-view-cell mui-media mui-col-xs-6" data-index="' + index + '">'
				html += '	<div class="mui-media-object">'
				html += '		<img class="special-image" src="'+item.goodsImg+'" />'
				html += '		<div class="special-info-div">'
				html += '			<div class="special-text">'+(item.goodsName.length>7?(item.goodsName.substring(0, 6)+'...'):item.goodsName)+'</div>'
				html += '			<div class="special-collect-div">'
				html += '				<img class="collect-icon" src="../img/common/hot_icon.png" />'
				html += '				<span class="collect-span">'+item.popularity+'人</span>'
				html += '			</div>'
				html += '		</div>'
				html += '		<div class="special-info-div">'
				html += '			<div class="special-price">¥'+(item.price/100)+'</div>'
				html += '			<div class="add-shopping-car-div"></div>'
				html += '		</div>'
				html += '	</div>'
				html += '</li>'
			}
			return html;
		}
		$("#specialul").on("tap", ".mui-table-view-cell", function() {
			var index = $(this).data('index');
			window.location.href = "goodsDetail.html?userID="+userID+'&goodsID='+saved.list[index].goodsID+'&merchantID='+saved.list[index].merchantID;
		})
		$("#specialul").on("tap", ".headerDiv", function() {
			var index = $(this).data('index');
			window.location.href = "goodsDetail.html?userID="+userID+'&goodsID='+saved.list[index].goodsID+'&merchantID='+saved.list[index].merchantID;
		})
		$(".common-back-div").on('tap','.common-back-img',function(){
			mui.back();
		});
	</script>
</html>
